<template>
  <div class="footer-box">
    <router-link to="/Index" class="btm">
      <div>
        <span class="iconfont icon-shouye"></span>
        <p>首页</p>
      </div>
    </router-link>
    <router-link to="/Choice" class="btm">
      <div>
        <span class="iconfont icon-shangcheng"></span>
        <p>商城</p>
      </div>
    </router-link>
    <router-link to="/Haoxie" class="btm">
      <div>
        <span class="iconfont icon-iconset0456"></span>
        <p>滔Ker</p>
      </div>
    </router-link>
      <div @click="wo" class="my">
        <span class="iconfont icon-wode2"></span>
        <p>我的</p>
      </div>
  </div>
</template>

<script>
export default {
  name: "myfooter",
  data() {
    return {};
  },
  methods: {
    wo() {
      this.username = sessionStorage.getItem("username");
      console.log(this.username);
      if (this.username != null) {
        this.$router.push({ path: "/My" });
      } else {
        this.$router.push({ path: "/Login" });
      }
    },
  },
};
</script>

<style scoped>
@import url(../../assets/iconfont.css);
.footer-box {
  width: 100%;
  height: 0.48rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-top: 1px solid #f1f1f1;
  position: fixed;
  bottom: 0;
  background-color: #fff;
}
a {
  color: #000;
  display: block;
}

.footer-box div {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.12rem;
}
.footer-box div .iconfont {
  height: 0.2rem;
  font-size: 0.18rem;
  margin-top: 0.15rem;
}
.footer-box .btm {
  width: 0.5rem;
  height: 100%;
}
.my{
  margin-bottom: .13rem;
}
</style>